<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button plain icon="plus" type="primary" @click="appHandleAdd({ systemType: $route.query.systemType })">添加</el-button>
        </div>
      </template>

      <el-tabs v-model="appQuery.systemType" @tab-click="handleTabClick" v-if="dict">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in dict.systemType" :key="index"></el-tab-pane>
      </el-tabs>

      <el-scrollbar>
        <el-table :data="appList" stripe style="width: 100%" row-key="menuId" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
          <el-table-column label="菜单名称" show-overflow-tooltip width="220">
            <template #default="scope">{{ scope.row.menuName }}</template>
          </el-table-column>
          <el-table-column label="图标">
            <template #default="scope">
              <i :class="scope.row.icon"></i>
            </template>
          </el-table-column>
          <el-table-column prop="rank" label="排序" show-overflow-tooltip></el-table-column>
          <el-table-column prop="path" label="路径" show-overflow-tooltip></el-table-column>
          <el-table-column label="菜单状态">
            <template #default="scope">
              <el-switch :before-change="() => appHandleUpdate(scope.row, { isOpen: !scope.row.isOpen }, !scope.row.isOpen ? '确认上线？' : '确认下线？', '已修改')" v-model="scope.row.isOpen"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button link type="primary" icon="plus" @click="appHandleAdd({ parentId: scope.row.menuId, systemType: scope.row.systemType })">新增</el-button>
              <el-button link type="primary" icon="edit" @click="appHandleEdit(scope.row)">修改</el-button>
              <el-button link type="primary" icon="delete" @click="appHandleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </app-page-main>

    <!-- 新增/编辑 内容 -->
    <app-dialog-edit width="600px" v-model="appShowDetail" :detail="appDetail" :json="formJson" @change="pageEditChange" />
  </app-page>
</template>

<script>
import { mapState } from 'vuex'
import { mixins } from 'jax-node'

export default {
  mixins: [mixins.pageList],
  data() {
    return {
      // 默认查询参数
      appQuery: {
        systemType: this.$route.query.systemType || 'admin',
      },

      // 默认参数
      appDefaultDetail: {},

      // 菜单列表
      menuList: [],
    }
  },
  computed: {
    ...mapState('app', ['userInfo', 'dict']),
    formJson() {
      const fixed = false
      const required = true
      const miniInput = { style: 'width:100px' }

      return [
        { name: 'parentId', label: '上级菜单', type: 'select', options: this.menuList, placeholder: '选择上级菜单' },
        { name: 'rank', label: '序号', type: 'number', tips: '（序号越小越靠前）', inputAttr: miniInput },
        { name: 'menuName', label: '菜单标题', required: true },
        [
          { name: 'path', label: '跳转地址' },
          { name: 'icon', label: '菜单图标' },
        ],
      ]
    },
  },
  created() {},
  methods: {
    // 初始化
    appInit() {
      this.getMenuTree()
      this.getMenuList()
    },

    // 保存前
    appBeforeSubmit(detail) {
      detail.systemType = this.appQuery.systemType
    },

    // 角色切换
    handleTabClick(tab, event) {
      // this.appInit()
      this.appSearch()
    },

    // 获取菜单树
    getMenuTree() {
      this.$http(`${this.appApi}/tree`, {
        params: {
          ...this.appQuery,
        },
      }).then((res) => {
        this.appList = res
      })
    },

    // 获取菜单列表
    getMenuList() {
      this.$http(this.appApi, {
        params: {
          systemType: this.appQuery.systemType,
        },
      }).then((res) => {
        this.menuList = res.map((item) => {
          let prefix = ''
          if (item.index > 1) {
            prefix = '├' + '─'.repeat((item.index - 1) * 1)
          }
          return {
            ...item,
            label: prefix + item.menuName,
            value: item.menuId,
            index: item.index,
          }
        })
      })
    },

    // 添加/保存后
    pageEditChange() {
      this.appInit()
      this.$store.dispatch('app/getMenu')
    },
  },
}
</script>

<style lang="scss" scope></style>
